<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        img {
            display: block;
        }
        
        .header-con,
        .content-con {
            width: 1099px;
            margin: 0 auto;
        }
        
        .header {
            height: 48px;
            background-color: #323232;
        }
        
        .header-con {
            height: 48px;
            background: #323232;
            margin-bottom: 107px;
        }
        
        .header-con .box {
            height: 48px;
        }
        
        .header-con .box .pica {
            width: 183px;
            height: 116px;
            float: left;
            display: block;
            margin-right: 31px;
            z-index: 6;
        }
        
        .box ul {
            width: 522px;
            height: 48px;
            float: left;
        }
        
        .box ul li {
            width: 87px;
            float: left;
            font-size: 13px;
            color: #a6a6a6;
            /* margin: 0 18px; */
            height: 48px;
            line-height: 48px;
            text-align: center;
            cursor: pointer;
        }
        
        .box ul li:hover {
            background-color: #dd4012;
            color: white;
        }
        
        .header-con .box .picb {
            float: right;
            width: 273px;
            height: 18px;
            display: block;
            margin-top: 15px;
        }
        
        .box ul .select {
            background: #dd4012;
            color: white;
        }
        
        .content {
            background-color: #f0f1f1;
            height: 1600px;
            position: relative;
            z-index: -3;
        }
        
        .content-con {
            background: #fff;
            height: 1400px;
            padding: 60px 55px;
            box-sizing: border-box;
            position: absolute;
            bottom: 107px;
            z-index: 3;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .content-con b {
            font-size: 23px;
        }
        
        .content-con .top {
            height: 70px;
            width: 100%;
            background: #f0f1f1;
            color: #747474;
            line-height: 22px;
            font-size: 12px;
            padding: 18px 20px 18px 23px;
            box-sizing: border-box;
            margin-top: 25px;
            margin-bottom: 27px;
        }
        
        .title {
            font-weight: bold;
        }
        
        .content-con .detail div {
            line-height: 35px;
            font-size: 14px;
            color: #333333;
            margin: 18px 0;
        }
        
        .content-con div:nth-last-of-type(1) {
            margin-bottom: 60px;
        }
        
        .content-con .last {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        
        .content-con .last a {
            color: #333;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="header-con">
            <div class="box">
                <img src="0.png" alt="" class="pica">
                <ul>
                    <li>网站首页</li>
                    <li>传悦资源</li>
                    <li class="select">传悦案例</li>
                    <li>传悦服务</li>
                    <li>解决方案</li>
                    <li>需求提交</li>
                </ul>
                <img src="16.png" alt="" class="picb">
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content-con">
            <b>AERMOST极尚 网站设计</b>
            <div class="top"></div>
            <div class="detail"></div>
            <hr>
            <p class="last">
                <a href="">上一个：开门红基础营销</a>
                <a href="">下一个：金数据全网整合营销</a>
            </p>

        </div>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        String.prototype.parseUrl = function() {
            let arr = this.slice(this.indexOf("?") + 1).split("&")
            let result = {}
            arr.forEach(item => {
                let key = item.split("=")[0]
                let value = item.split("=")[1]
                result[key] = value
            })
            return result;
        }
        $.ajax({
            url: "http://10.35.170.82:8080/getcontent",
            data: {
                id: location.href.parseUrl().id
            },
            success(data) {
                $(".top").html(data.top)
                $(".detail").html(data.content)
            }
        })
    </script>

</body>

</html>